<template>
  <div>
    <!-- 通知栏 -->
    <noticeBar></noticeBar>
    <van-nav-bar
      class="page-nav-bar"
      left-text="我的关注"
      left-arrow
      @click-left="$router.back()"
    >
      <template #right>
        <rightTopBtn class="rightTopBtn"></rightTopBtn>
      </template>
    </van-nav-bar>
    <!-- Tab标签页 -->
    <van-tabs v-model="active">
      <van-tab title="家服公司"><Company></Company></van-tab>
      <van-tab title="家服人员"><Personnel></Personnel></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import rightTopBtn from '@/components/rightTopBtn'
import noticeBar from '@/components/noticeBar'
import Personnel from './module/Personnel.vue'
import Company from './module/Company.vue'
export default {
  data () {
    return {
      active: ''
    }
  },
  components: {
    rightTopBtn,
    noticeBar,
    Personnel,
    Company
  }
}
</script>

<style lang="less" scoped>
/deep/.page-nav-bar {
  background-color: #3F51B5;
  padding-top: 50px;
  padding-bottom: 70px;
  .van-nav-bar__text {
    color: #fff;
  }
  .van-icon-arrow-left {
    color: #fff;
  }
  .van-nav-bar__text {
    font-size: 32px;
  }
}
/deep/.van-tabs__line {
  background-color: #fff;
}
/deep/.van-tabs {
background: #f5f5f2;
// background-color: red;
  position: absolute;
  top: 2 * 62px;
  left: 0;
  right: 0;
  z-index: 999;
  border: 0 solid rgba(255, 255, 255, 0);
  border-top: 0px solid #3F51B5;
  padding: 0;
  margin: 0;
}
/deep/.van-tabs__nav {
  background-color: #3f51b5;
  .van-tab {
    color: #fff;
    font-size: 28px;
    font-weight: 400;
  }
}
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
/* ie6 7 专门清除浮动的样式*/
.clearfix {
  *zoom: 1;
}
/deep/.van-tabs__wrap {
    height: 1.17333rem;
    top: -1px;
    position: relative;
}
</style>
